<style scoped>
</style>
<template>
  <div class="eidtmore-box">
    <h1>
      {{ name }} &nbsp; &nbsp; &nbsp;
      <el-button size="mini" icon="el-icon-plus" type="default" circle @click="add"></el-button>
      <el-button
        size="mini"
        icon="el-icon-check"
        type="success"
        circle
        @click="save"
        v-if="api && saveapi"
      ></el-button>
    </h1>
    <div class="inbox">
      <table class="border" cellpadding="0" cellspacing="0">
        <slot name="head"></slot>
        <tbody v-if="loading">
          <tr>
            <td colspan="20" class="tc">
              <i class="fa el-icon-loading fa-spin"></i>
            </td>
          </tr>
        </tbody>
        <tbody v-else>
          <slot name="item" v-for="(item, index) in data" :item="item" :index="index"></slot>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  props: ["name", "initdata", "newdata", "saveapi", "api", "params"],
  data() {
    return {
      data: [],
      loading: false
    };
  },
  mounted() {
    let that = this;
    this.getlist();
  },
  watch: {
    params: {
      handler(newValue, oldValue) {
        this.getlist();
      },
      deep: true
    },
    initdata: {
      handler(newValue, oldValue) {
        this.getlist();
      },
      deep: true
    }
  },
  methods: {
    getData() {
      return this.data;
    },
    up(index) {
      this.data.up(index);
    },
    down(index) {
      this.data.down(index);
    },
    add() {
      let a = {};
      for (let i in this.newdata) {
        a[i] = this.newdata[i];
      }
      this.data.push(a);
    },
    checkout() {
      return this.data.some(el => {
        return !el.name || !el.path;
      });
    },
    save(item) {
      let noData = this.checkout();
      if (noData) {
        this.$error("API名称和权限不能为空");
        return;
      }
      let that = this;
      that.loading = true;
      that.postData = {};
      Object.keys(that.params).forEach(function(key) {
        that.postData[key] = that.params[key];
      });
      Object.assign(that.params || {}, {});
      that.postData["data"] = that.data;
      that.$api.jpost(that.saveapi, that.postData).then(res => {
        if (res.status === 1) {
          that.$success(res.msg);
          that.getlist();
        } else {
          that.$error(res.msg);
        }
        that.loading = false;
      });
    },
    del(index) {
      this.data.splice(index, 1);
      this.$emit("load");
    },
    getlist() {
      let that = this;
      that.data = [];
      if (that.initdata && that.initdata.length > 0) {
        this.data = JSON.parse(JSON.stringify(this.initdata));
      }
      if (that.api) {
        that.loading = true;
        that.$api.get(that.api, that.params).then(res => {
          if (res.status === 1 && res.data) {
            if (res.data.action == null) res.data.action = [];
            that.data = res.data.action || res.data || [];
            that.$emit("load");
          }
          this.loading = false;
        });
      }
    }
  }
};
</script>
<style scoped lang="scss">
.eidtmore-box .inbox > table {
  width: 100%;
  margin: 0 auto;
  border: 0;
  margin: 0;
  border-collapse: collapse;
  border-spacing: 0;
}
.eidtmore-box .inbox > table tr th {
  color: #ccc;
  font-weight: 400;
  text-align: left;
}
.eidtmore-box .inbox > table tr th,
.eidtmore-box .inbox > table tr td {
  padding: 7px 13px;
  font-size: 12px;
}
</style>
